/*
* @Date: 2020/4/28
* @Author: XueChengwu <xuechengwu@erayt.com>
* @Copyright: 2015-2019 Erayt, Inc.
* @Description: If you have some questions, please contact: xuechengwu@erayt.com.
*/
import React from 'react';
import { Modal, Input, message, Select } from 'antd';
import Ele from '../../ele'
import Page from '../../ele/page';
import './NewComponent.scss';

export default class extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      type: 'C',
      name: ''
    };
  }

  onChangeName = (e) => {
    const { value } = e.target;
    this.setState({
      name: value
    });
  }

  componentWillReceiveProps(nextProps, nextContext) {
    const { type } = nextProps;
    if (type !== this.state.type) {
      this.setState({
        type
      });
    }
  }

  onTypeChange = (type) => {
    this.setState({
      type,
    });
  }

  onOk = () => {
    const { type, name } = this.state;
    const { dirPath = '/', onNewPageSuccess, onNewComponentSuccess } = this.props;
    if (type === 'P') {
      Ele.newPage(name, dirPath);
      onNewPageSuccess && onNewPageSuccess(name);
    } else {
      Ele.newComponent(name, dirPath);
      onNewComponentSuccess && onNewComponentSuccess(name);
    }
  }

  onCancel = () => {

  }

  render() {
    const { visible } = this.props;
    const { type, name } = this.state;
    return (
      <Modal
        title={`新建${type === 'C' ? '组件' : '页面'}`}
        visible={visible}
        width={400}
        okText="新建"
        cancelText="取消"
        onOk={this.onOk}
        onCancel={this.onCancel}
      >
        <div className="new-component-input-item">
          <span>名称</span>
          <Input onChange={this.onChangeName} value={name}/>
        </div>
        <div className="new-component-input-item">
          <span>类型</span>
          <Select defaultValue={type} onChange={this.onTypeChange}>
            <Select.Option value="C">组件</Select.Option>
            <Select.Option value="P">页面</Select.Option>
          </Select>
        </div>

      </Modal>
    )
  }
}
